<template>
  <!--投递控件-->
  <el-card :style="{ height: '650px', padding: '20px' }">
    <div class="button-container">
      <el-button :type="scriptPaused ? 'success' : 'primary'" :icon="scriptPaused ? 'el-icon-caret-right' : 'el-icon-pause'" @click="toggleScript">
        {{ scriptPaused ? '继续执行' : '暂停程序' }}
      </el-button>
      <el-button type="danger" icon="el-icon-close" @click="endScript">结束程序</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { ElMessage } from "element-plus";

const scriptPaused = ref(); // 初始状态为暂停

const toggleScript = async () => {


  // 状态
  const status = await window.bossHandleApi.getDeliveryStatus();
  console.log('打印状态',status)
  if (status){
    ElMessage.error('投递窗口暂未启动，无法执行程序')
    return
  }

  const res = await window.bossHandleApi.pauseScript(!scriptPaused.value);

  console.log('脚本已暂停', res);
  scriptPaused.value = res
  // scriptPaused.value = !scriptPaused.value; // 切换按钮状态

  ElMessage.success( !scriptPaused.value ? '继续执行' : '暂停程序'+"成功")
};

const endScript = async () => {
  try {
    const res = await window.bossHandleApi.stopScript();
    console.log('执行了结束指令', res);
    // 根据业务逻辑处理 res 的值
    if (res === false) {
      ElMessage.error('程序正在进行终止或已经终止，请勿重复点击！');
    }
  } catch (error) {
    console.error('在执行结束指令时出现错误：', error);
    ElMessage.error('程序正在进行终止或已经终止，请勿重复点击！');
    // 可以根据具体情况处理其他逻辑，比如记录日志
  }
};

onMounted(async () => {
  // 获取窗口的值判断是否为空
  const res = await window.bossHandleApi.pauseScript(null);
  scriptPaused.value = res;

  // 启动定时器
  const timer = setInterval(async () => {
    const res = await window.bossHandleApi.pauseScript(null);
    if (res !== scriptPaused.value) {
      scriptPaused.value = res;
    }
  }, 1000); // 每秒检测一次

  // 在组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(timer);
  });
});
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 30px;
}

.button-container .el-button {
  width: 160px;
  height: 50px;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.button-container .el-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-container .el-button .el-icon {
  font-size: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

/* 按钮颜色和hover效果 */
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--success {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
}

.el-button--success:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}

.el-button--danger:hover {
  background-color: #f78989;
  border-color: #f78989;
}
</style>
